<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Grid",
  inheritAttrs: false,
  props: {
    /** 网格每行的列数 */
    cols: {
      type: [Number, String],
      default: "1",
    },
    /** 网格每行的间距 */
    xGap: {
      type: [String],
      default: "0px",
    },
    /** 网格列的间距 */
    yGap: {
      type: [String],
      default: "0px",
    },
  },
  setup(context, props) {
    return {};
  },
});
</script>

<template>
  <div
    class="t-grid"
    :style="`grid-gap: ${xGap} ${yGap};grid-template-columns: repeat(${cols}, minmax(0, 1fr));`"
  >
    <slot />
  </div>
</template>

<style lang="scss">
.t-grid {
  display: grid;
}
</style>
